<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Responsive Bootstrap 4 Admin Template">
  <meta name="author" content="Bootlab">

  <title>AppStack - Responsive Admin Template</title>

  <link href="css/app.css" rel="stylesheet">

</head>

<body>
  <div class="wrapper">
    <div class="d-flex">
      <nav class="sidebar">
        <div class="sidebar-content">
          <a class="sidebar-brand" href="index.html">
            <i class="align-middle" data-feather="box"></i>
            <span class="align-middle">AppStack</span>
          </a>





        </div>
      </nav>

      <div class="main">
        <nav class="navbar navbar-expand navbar-light bg-white">
          <a class="sidebar-toggle d-flex mr-2">
            <i class="hamburger align-self-center"></i>
          </a>

          <form class="form-inline d-none d-sm-inline-block">
            <input class="form-control mr-sm-2" type="text" placeholder="Search projects" aria-label="Search">
          </form>

          <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                  <div class="position-relative">
                    <i class="align-middle" data-feather="message-circle"></i>
                    <span class="indicator">4</span>
                  </div>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                  <div class="dropdown-menu-header">
                    <div class="position-relative">
                      4 New Messages
                    </div>
                  </div>
                  <div class="list-group">
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <img src="img/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Ashley Briggs">
                        </div>
                        <div class="col-10 pl-2">
                          <div class="text-dark">Ashley Briggs</div>
                          <div class="text-muted small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
                          <div class="text-muted small mt-1">15m ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <img src="img/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="Carl Jenkins">
                        </div>
                        <div class="col-10 pl-2">
                          <div class="text-dark">Carl Jenkins</div>
                          <div class="text-muted small mt-1">Curabitur ligula sapien euismod vitae.</div>
                          <div class="text-muted small mt-1">2h ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <img src="img/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Stacie Hall">
                        </div>
                        <div class="col-10 pl-2">
                          <div class="text-dark">Stacie Hall</div>
                          <div class="text-muted small mt-1">Pellentesque auctor neque nec urna.</div>
                          <div class="text-muted small mt-1">4h ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <img src="img/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Bertha Martin">
                        </div>
                        <div class="col-10 pl-2">
                          <div class="text-dark">Bertha Martin</div>
                          <div class="text-muted small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
                          <div class="text-muted small mt-1">5h ago</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="dropdown-menu-footer">
                    <a href="#" class="text-muted">Show all messages</a>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
                  <div class="position-relative">
                    <i class="align-middle" data-feather="bell-off"></i>
                  </div>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="alertsDropdown">
                  <div class="dropdown-menu-header">
                    4 New Notifications
                  </div>
                  <div class="list-group">
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <i class="text-danger" data-feather="alert-circle"></i>
                        </div>
                        <div class="col-10">
                          <div class="text-dark">Update completed</div>
                          <div class="text-muted small mt-1">Restart server 12 to complete the update.</div>
                          <div class="text-muted small mt-1">2h ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <i class="text-warning" data-feather="bell"></i>
                        </div>
                        <div class="col-10">
                          <div class="text-dark">Lorem ipsum</div>
                          <div class="text-muted small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
                          <div class="text-muted small mt-1">6h ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <i class="text-primary" data-feather="home"></i>
                        </div>
                        <div class="col-10">
                          <div class="text-dark">Login from 192.186.1.1</div>
                          <div class="text-muted small mt-1">8h ago</div>
                        </div>
                      </div>
                    </a>
                    <a href="#" class="list-group-item">
                      <div class="row no-gutters align-items-center">
                        <div class="col-2">
                          <i class="text-success" data-feather="user-plus"></i>
                        </div>
                        <div class="col-10">
                          <div class="text-dark">New connection</div>
                          <div class="text-muted small mt-1">Anna accepted your request.</div>
                          <div class="text-muted small mt-1">12h ago</div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="dropdown-menu-footer">
                    <a href="#" class="text-muted">Show all notifications</a>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
                  <span class="d-inline-block d-md-none">
                    <i class="align-middle" data-feather="settings"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">
                    <img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1" alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                  <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i> Profile</a>
                  <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i> Analytics</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Settings & Privacy</a>
                  <a class="dropdown-item" href="#">Help</a>
                  <a class="dropdown-item" href="#">Sign out</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>

        <main class="content">
          <div class="container-fluid p-0">

            <h1 class="h3 mb-3">应收账款-单据查询</h1>

            <div class="row">

              <div class="col-12 col-lg-12">
                <div class="card">
                  <div class="card-header">
                    <ul class="nav nav-pills card-header-pills pull-right" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab-1">发票</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-2">发票细单</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-2">订单</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-2">发货单</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-2">手术单</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link " data-toggle="tab" href="#tab-3">行程单</a>
                      </li>
                    </ul>
                  </div>
                  <div class="card-body">
                    <div class="tab-content">
                      <div class="tab-pane fade show active" id="tab-1" role="tabpanel">
                        <h5 class="card-title"></h5>
                        <div class='mb-1'>
                          <form>
                            <div class="form-row">
                              <div class="form-group col-md-4">
                                <label for="inputEmail4">发票号码</label>
                                <input type="email" class="form-control" id="inputEmail4" placeholder=" ">
                              </div>
                              <div class="form-group col-md-4">
                                <label for="inputPassword4">发票开票日期</label>
                                <input type="password" class="form-control" id="inputPassword4" placeholder=" ">
                              </div>
                              <div class="form-group col-md-4">
                                <label for="inputCity">票据推送方</label>
                                <input type="text" class="form-control" id=" ">
                              </div>

                            </div>

                            <div class="form-row">

                              <div class="form-group col-md-6">
                                <label for="inputState">票据销售方</label>
                                <select id="inputState" class="form-control">
                                  <option selected>Choose...</option>
                                  <option>...</option>
                                </select>
                              </div>
                              <div class="form-group col-md-6">
                                <label for="inputState">票据购买方</label>
                                <select id="inputState" class="form-control">
                                  <option selected>Choose...</option>
                                  <option>...</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="custom-control custom-checkbox m-0">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-label">票据是否有效</span>
                              </label>
                            </div>
                            <button type="submit" class="btn btn-primary">查询</button>
                          </form>
                        </div>
                        <h4 class="card-title mb-2 mt-2">查询结果</h4>
                        <table class="table">
                          <thead>
                            <tr>
                              <th style="width:10%;">发票号码</th>
                              <th style="width:10%">发票金额</th>
                              <th style="width:15%">发票销售方</th>
                              <th style="width:15%">发票购买方</th>
                              <th class="d-none d-md-table-cell" style="width:15%">发票开票日期</th>
                              <th style="width:15%">形成应收资产</th>
                              <th style="width:15%">应收资产编号</th>
                              <th>详情</th>
                            </tr>
                          </thead>
                          <tbody id='table-bar'>
                            <!-- <tr>
                              <td>Ashley Briggs</td>
                              <td>864,348,0485</td>
                              <td class="d-none d-md-table-cell">June 21, 1961</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Carl Jenkins</td>
                              <td>914,939,2458</td>
                              <td class="d-none d-md-table-cell">May 15, 1948</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Bertha Martin</td>
                              <td>704,993,5435</td>
                              <td class="d-none d-md-table-cell">September 14, 1965</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Stacie Hall</td>
                              <td>765,382,8195</td>
                              <td class="d-none d-md-table-cell">April 2, 1971</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Amanda Jones</td>
                              <td>202,672,1407</td>
                              <td class="d-none d-md-table-cell">October 12, 1966</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr> -->
                          </tbody>
                        </table>
                        <script>
                          document.addEventListener("DOMContentLoaded", function() {
                            tb = document.getElementById("table-bar")
                            // 定义的数组,根据数组,渲染生成页面内容
                            var arr = [
                              ['1110123123', 18123, '瑞康', '医院1', '2020-01-01', '是','<a href="demo-应收账款_DETAIL.html"> A10001 </a>', ''],
                              ['1110123124', 1813, '瑞康', '医院1', '2020-01-01', '是', '<a href="a.html">A10012312</a>',''],
                              ['1110123125', 1811, '瑞康', '医院1', '2020-01-01', '否','', ''],
                              ['1110123126', 17123, '瑞康', '医院1', '2020-01-01', '是', '<a href="a.html">A10012312</a>',''],
                            ];
                            console.log(arr)
                            // 定义变量,存储要写入的内容
                            var str = '';

                            // 外层循环,生成tr标签,有一维单元,就循环生成几个tr标签
                            // 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
                            // 生成所有索引下标的数值
                            // 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
                            for (var i = 0; i <= arr.length - 1; i++) {
                              // console.log(arr[i]);

                              // 外层循环生成tr标签,循环几次,就生成几个tr标签
                              // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
                              str += '<tr>';
                              // 定义tr标签的内容,也就是td单元格标签
                              // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1


                              // 其他单元格,是内层循环生成的,循环的对象是二维数组
                              // arr[i] 拿到的就是 每次循环,当前行,对应的二维数组
                              // 循环的对象是 arr[i] , 生成 arr[i] 的所有的 索引下标
                              // 通过索引下标,获取对应的数据
                              // 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1  arr[i].length-1
                              for (var j = 0; j <= arr[i].length - 1; j++) {
                                // 二维数组有几个单元,就循环几次,生成几个td单元个
                                // 可以生成对应的单元格
                                // 每一个单元的内容,就是当前二维数组单元的数据内容
                                // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
                                // arr[i][j]
                                if (j == arr[i].length - 1) {
                                  str += `<td class="table-action"><a href="#"><i class="align-middle" data-feather="edit-2"></i></a><a href="#"><i class="align-middle" data-feather="eye"></i></a></td>`;
                                } else {
                                  str += `<td>${arr[i][j]}</td>`;
                                }

                              }

                              str += '</tr>';
                            }


                            // 将定义好的内容,写入到tbody标签中
                            tb.innerHTML = str;

                          });
                        </script>

                        <a href="#" class="btn btn-primary">导出</a>
                      </div>
                      <div class="tab-pane fade" id="tab-2" role="tabpanel">
                        <h5 class="card-title">发票西单</h5>
                        <table class="table table-striped">
                          <thead>
                            <tr>
                              <th style="width:40%;">Name</th>
                              <th style="width:25%">Phone Number</th>
                              <th class="d-none d-md-table-cell" style="width:25%">Date of Birth</th>
                              <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Ashley Briggs</td>
                              <td>864-348-0485</td>
                              <td class="d-none d-md-table-cell">June 21, 1961</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Carl Jenkins</td>
                              <td>914-939-2458</td>
                              <td class="d-none d-md-table-cell">May 15, 1948</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Bertha Martin</td>
                              <td>704-993-5435</td>
                              <td class="d-none d-md-table-cell">September 14, 1965</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Stacie Hall</td>
                              <td>765-382-8195</td>
                              <td class="d-none d-md-table-cell">April 2, 1971</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                            <tr>
                              <td>Amanda Jones</td>
                              <td>202-672-1407</td>
                              <td class="d-none d-md-table-cell">October 12, 1966</td>
                              <td class="table-action">
                                <a href="#"><i class="align-middle" data-feather="edit-2"></i></a>
                                <a href="#"><i class="align-middle" data-feather="trash"></i></a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <a href="#" class="btn btn-primary">导出</a>
                      </div>
                      <div class="tab-pane fade" id="tab-3" role="tabpanel">
                        <h5 class="card-title">Card with tabs</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </main>

      </div>
    </div>
  </div>

  <script src="js/app.js"></script>

</body>

</html>
